<!DOCTYPE html>
<html>
    <head><meta charset="UTF-8">
        <title>Vue Todo Tutorial</title>
        <style>
            .empty {
              border-color: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <input type="text" v-bind:class='{empty: !count}'  v-model="value">
            <input type="button" value="发送" v-on:click='send'>
            <div v-if="count!=0">value 的值是：{{ value }}</div>
            <div>字数：{{ count }}</div>
        </div>
    </body>
        <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: function () {
                    return {value: ''}
                },
                methods: {
                    send: function(){
                        if (this.count == 0){
                            alert('输入为空，请重新输入。')
                        }
                        else {
                            alert('发送成功！');
                            this.value = '';
                        }
                    }
                },
                computed: {
                    count: function(){
                        return this.value.length
                    }
                }
            })
        </script>
</html>